<template>
    <div id="login">
          <div class="titilImg">
               <back Title="登录" operation=""></back>
            </div>
        <div class="maininput" > 
            <div class="input" ref="username">
                <el-input v-model="username"   placeholder="请输入用户名"></el-input>
            </div>
            <div class="input">
                <el-input v-model="password" placeholder="请输入密码" type="password" ref="PW"></el-input>
            </div>
            <van-button @click="SignIn" type="info" @keyup.enter.native="SignIn">登录</van-button>
            
            <van-dialog v-model="show" title="第一次登录，请确认密码" :before-close="beforeClose"  @confirm="confirmPassword" show-cancel-button>
                 <van-field v-model="confirmpassword"  input-align="center"   beforeClose type="password"  placeholder="请确认密码" :error-message="errMsg" />
            </van-dialog>
        </div>
       
        <div class="prompt_text">
            第一次登陆会自动进行注册
        </div>
    </div>
</template>

<script>
import Back from "../../../components/back.vue"


import {Login,Register} from "../../../api/User";
import MD5 from "MD5"
export default {
    name: 'SignIn',
    components:{
        Back
    },
    data() {
        return {
            username:"",
            password:"",
            confirmpassword:"",
            errMsg:"",
            show:false,
            isdone:true //是否关闭确认密码的验证框
        };
    },

    mounted() {
      this.eliminateToken()
    },

    methods: {
         beforeClose(action, done){

            if(action==="confirm"){
                done(this.isdone) 
            }else{
                this.isdone=true
                done(this.isdone) 
            }
        
         },

        //清除token
        eliminateToken(){
            localStorage.removeItem("token")
        },

        //二次确认密码
        confirmPassword(){
            if(this.password===this.confirmpassword){
               this.ToRegister()
            }else{
                this.isdone=false
                this.errMsg="两次密码不一致，请重新输入"
            }
        },
        //登录接口
    async  SignIn(){
        if(this.username==""){
            this.$toast('用户名都没有填啊大佬！');
            this.$refs.username.querySelector('input').focus()

        }else{
            
            let  {code,data,msg} = await Login({
                "userName":this.username,
                "userPassword":MD5(this.password)
            })

            if(code===200){
                localStorage.setItem("token",data.token)
                this.$store.commit("alterIsToken",true)
                this.$store.commit("AlteruserName",{
                    userId:data.ID,
                    userName:this.username
                })
                this.$router.push("personalCenter")

            }else if(code===204){
                this.show=true
            }else if(code===205){
                this.$toast('密码错误！');
                this.$refs.PW.focus()

            }
        }

        
           
       
      },

      async ToRegister(){
    
         let {code,data}=  await Register({
                "userName":this.username,
                "userPassword":MD5(this.password)
            })
        if(code===200){
                this.SignIn()
        }else{
            alert("注册失败!");
        }
      } 
    },
};
</script>

<style scoped>
    #login{
        width: 100vw;
        height: 100vh;
        background: url(@/assets/img/lp.jpg)  no-repeat;
        background-size: 100% 100%;
    }
    .titilImg{ 
        height: 20vh;
        background-size: 100% 100%;
        opacity: 0.7;
        z-index: 10;
    }
    .maininput{
        margin-top: 10vh;
        text-align: center;
    }
    .input{
        margin: 0 15px 30px;
        text-align: center;
    }
   .van-button--normal{
      width: 80vw;
      height: 7vh;
      font-size: 20px;
    }
    
    .prompt_text{
        font-size: 20px;
        width: 100%;
        bottom: 20px;
        position: absolute;
        text-align:center;
        color: aqua;
    }
</style>